import React from 'react';
import { connect } from 'dva';
import { Button, Table, Form, Input, Popconfirm, DatePicker, Select, TreeSelect, Row, Col, } from 'antd';

import EditModal from '../../components/cabinet/EditModal';

const FormItem = Form.Item;
const Option = Select.Option;
const TreeNode = TreeSelect.TreeNode;
const RangePicker = DatePicker.RangePicker;

function Cabinet({ dispatch, cabinet, loading, form }) {

    const { getFieldDecorator, getFieldsValue, getFieldValue } = form;
    const { modalVisible, modalType, roomList, rackList, rackTypeList,rackBrandList,
        rackModelList} = cabinet


    const columns = [{
        title: '机柜名称',
        dataIndex: 'assetName',
        key: 'assetName',
        width: 100,
    }, {
        title: '所在机房',
        dataIndex: 'roomName',
        key: 'roomName',
        width: 100,
    },{
        title: '机柜组名称',
        dataIndex: 'cabinetGroupName',
        key: 'cabinetGroupName',
        width: 100,
    },
    {
        title: '机柜所在行',
        dataIndex: 'rowNum',
        key: 'rowNum',
        width: 80,
    }, {
        title: '机柜所在列',
        dataIndex: 'colNum',
        key: 'colNum',
        width: 80,
    },  {
        title: 'x坐标',
        dataIndex: 'x',
        key: 'x',
        width: 80,
    }, {
        title: 'y坐标',
        dataIndex: 'y',
        key: 'y',
        width: 80,
    }, {
        title: 'z坐标',
        dataIndex: 'z',
        key: 'z',
        width: 80,
    }, {
        title: '角度',
        dataIndex: 'rotation',
        key: 'rotation',
        width: 80,
    }, {
        title: '操作',
        key: 'operation',
        width: 100,
        render: (text, record) => (
            <span>
                <a onClick={onEditItem.bind(null, record)}>编辑</a>
                <span className="ant-divider" />
                <Popconfirm title="确认删除？" onConfirm={deleteHandler.bind(null, record.id_)}>
                <a>删除</a>
                </Popconfirm>
            </span>
        ),
    }];

    const pagination = {
        current: cabinet.current,
        pageSize: cabinet.currentSize,
        total: cabinet.total,
        showSizeChanger: true,
        showTotal: (total => '共' + cabinet.total + '条'),
        onShowSizeChange(current, size) {
            dispatch({
                type: 'cabinet/queryList',
                payload: { ...getFieldsValue(), ...{ 'pageNum': current, 'pageSize': size } },
            });
        },
        onChange(current) {
            dispatch({
                type: 'cabinet/queryList',
                payload: { ...getFieldsValue(), ...{ 'pageNum': current, 'pageSize': cabinet.currentSize } },
            });
        },
    };
    const editHandler = (id, values) => {
        dispatch({
            type: 'cabinet/edit',
            payload: { id, ...values },
        });
    }
    const submitHandle = () => {
        dispatch({
            type: 'cabinet/queryList',
            payload: { ...getFieldsValue() },
        });
    }
    function handleClear() {
        form.resetFields();
    }
    const onEditItem = (data) => {
        dispatch({
            type: 'cabinet/showEditModal',
            payload: {
                detail:data,
                modalType: 'edit'
            },
        })
    }

    const addHandler = () => {
        dispatch({
            type: 'cabinet/showAddModal',
            payload: {
                detail:{},
                modalType: 'create',
            },
        })
    }
    function deleteHandler(id) {
        dispatch({
            type: 'cabinet/remove',
            payload: {id:id,search:{...getFieldsValue()}},
        });
    }

    const modalProps = {
        item:cabinet.cabinetItem,
        visible: modalVisible,
        type: modalType,
        roomList:roomList,
        rackTypeList:rackTypeList,
        rackBrandList:rackBrandList,
        rackModelList: rackModelList,
        cabinetExtList:cabinet.cabinetExtList,
        cabinetGroupList:cabinet.cabinetGroupList,
        maskClosable: false,
        confirmLoading: loading,
        title: `${modalType === 'create' ? '新增机柜信息' : '编辑机柜信息'}`,
        wrapClassName: 'vertical-center-modal',
        newKey: cabinet.newKey,
        dispatch:dispatch,
    }

    const loopRoom = data => data.map((item) => {
        return <Option key={item.id_ + ''}>{item.name}</Option>
    });

    return (
        <div style={{ backgroundColor: '#fff' }}>
            <div style={{ minHeight: '100%' }}>
                <div style={{ width: '100%', height: '40px', backgroundColor: '#fff', lineHeight: '40px', paddingLeft: '20px', paddingTop: '10px' }}>
                    <Form layout="inline" >
                        <Row>
                            <FormItem 
                             label="机房名称"
                             hasFeedback
                            >
                                {
                                    getFieldDecorator('roomId')(
                                        <Select
                                            showSearch
                                            style={{ width: 180 }}
                                            placeholder="选择机房"
                                            optionFilterProp="children"
                                        >
                                            {loopRoom(cabinet.roomList)}

                                        </Select>
                                    )
                                }
                            </FormItem>
                            {/* <FormItem
                                label="机柜组名称"
                                hasFeedback
                            >
                                {getFieldDecorator('cabinetGroupName')(<Input placeholder="请输入机柜组名称查找" style={{ width: '150px' }} />)}
                            </FormItem> */}
                            <FormItem
                                label="机柜名称"
                                hasFeedback
                            >
                                {getFieldDecorator('rackName')(<Input placeholder="请输入机柜名称模糊查找" style={{ width: '180px' }} />)}
                            </FormItem>
                            
                            <FormItem>
                                <Button type="primary" size='large' onClick={submitHandle} className='ant-search-btn'>查询</Button>
                            </FormItem>
                            <FormItem>
                                <Button size="large" htmlType="reset" onClick={handleClear}>清空</Button>
                            </FormItem>
                            <div style={{ marginTop: '-40px', textAlign: 'right', paddingRight: '10px' }}>
                            <FormItem>
                                <Button type="primary" size='large' onClick={addHandler}>新增机柜</Button>
                            </FormItem>
                        </div> 
                        </Row>
                    </Form>
                </div>
                <div style={{ width: '100%',padding:"30px 20px", }}>
                    <Table columns={columns} rowKey={record => record.id_} loading={loading} dataSource={cabinet.list} pagination={pagination}
                    />
                </div>
            </div>
            <EditModal {...modalProps} />
        </div>
    );
}

function mapStateToProps(state) {
    return { cabinet: state.cabinet, loading: state.loading.models.cabinet };
}

Cabinet= Form.create()(Cabinet);

export default connect(mapStateToProps)(Cabinet);
